<!DOCTYPE HTML>
<html>
<head>
    <title>朋友圈转发截图生成工具</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="author" content="TransparentLC">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <link rel="stylesheet" href="css/mdui.min.css">
    <link rel="stylesheet" href="css/style.css">

</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink mdui-appbar-with-toolbar">
<header class="mdui-appbar mdui-appbar-fixed">
    <div class="mdui-toolbar mdui-color-theme">
        <span class="mdui-typo-title">朋友圈转发截图生成工具</span>
        <div class="mdui-toolbar-spacer"></div>
    </div>
</header>
<div class="mdui-container">
    <div class="mdui-row">
        <div class="mdui-col-xs-8 mdui-col-sm-10">
            <div class="mdui-textfield">
                <label class="mdui-textfield-label">用户名</label>
                <input id="configName" class="mdui-textfield-input" type="text"/>
            </div>
        </div>
        <div class="mdui-col-xs-4 mdui-col-sm-2">
            <div class="mdui-textfield">
                <label class="mdui-textfield-label">&nbsp;</label>
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="document.getElementById('configAvatar').click();">选择头像
                </button>
                <input id="configAvatar" type="file" style="display:none"/>
            </div>
        </div>
    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">正文</label>
        <textarea id="configText" class="mdui-textfield-input"></textarea>
    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">截图类型</label>
    </div>
    <div class="mdui-row">
        <div class="mdui-col-xs-6">
            <label class="mdui-radio">
                <input id="configTypeText" type="radio" name="group" checked/>
                <i class="mdui-radio-icon"></i>纯文字
            </label>
        </div>
        <div class="mdui-col-xs-6">
            <label class="mdui-radio">
                <input id="configTypeWebsite" type="radio" name="group"/>
                <i class="mdui-radio-icon"></i>分享网页/公众号文章
            </label>
        </div>
        <div class="mdui-col-xs-6">
            <label class="mdui-radio">
                <input id="configTypeSingleImage" type="radio" name="group"/>
                <i class="mdui-radio-icon"></i>图片（单张）
            </label>
        </div>
        <div class="mdui-col-xs-6">
            <label class="mdui-radio">
                <input id="configTypeMultiImage" type="radio" name="group"/>
                <i class="mdui-radio-icon"></i>图片（九宫格）
            </label>
        </div>
    </div>

    <div id="configWebsite" style="display: none;">
        <div class="mdui-textfield">
            <label class="mdui-textfield-label">网页标题</label>
            <input id="configArticleTitle" class="mdui-textfield-input" type="text" value="还不会用Google的你，就要被时代淘汰了"/>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-xs-6">
                <button class="mdui-btn mdui-ripplet mdui-btn-block mdui-text-color-theme-accent"
                        onclick="document.getElementById('configArticleIcon').click();">上传网页图标
                </button>
                <input id="configArticleIcon" type="file" style="display:none"/>
            </div>
            <div class="mdui-col-xs-6">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="getArticleInfo();">自动获取公众号文章标题/封面图
                </button>
            </div>
        </div>
    </div>

    <div id="configSingleImage" style="display: none;">
        <div class="mdui-row">
            <div class="mdui-col-xs-6">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="document.getElementById('configSetSingleImage').click();">上传图片
                </button>
            </div>
            <div class="mdui-col-xs-6">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="addPlayIcon()">添加视频播放图标
                </button>
            </div>
        </div>
        <input id="configSetSingleImage" type="file" style="display:none"/>
    </div>

    <div id="configMultiImage" style="display: none;">
        <div class="mdui-m-y-1">请按图片 1 - 9 的顺序添加图片～<br>如果只需要显示一张图片，建议选择“图片（单张）”。</div>
        <div class="mdui-row">
            <div class="mdui-col-xs-4">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="document.getElementById('configSetMultiImage1').click();">上传图片 1
                </button>
                <input id="configSetMultiImage1" type="file" style="display:none"/>
            </div>
            <div class="mdui-col-xs-4">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="document.getElementById('configSetMultiImage2').click();">上传图片 2
                </button>
                <input id="configSetMultiImage2" type="file" style="display:none"/>
            </div>
            <div class="mdui-col-xs-4">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="document.getElementById('configSetMultiImage3').click();">上传图片 3
                </button>
                <input id="configSetMultiImage3" type="file" style="display:none"/>
            </div>
            <div class="mdui-col-xs-4">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="document.getElementById('configSetMultiImage4').click();">上传图片 4
                </button>
                <input id="configSetMultiImage4" type="file" style="display:none"/>
            </div>
            <div class="mdui-col-xs-4">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="document.getElementById('configSetMultiImage5').click();">上传图片 5
                </button>
                <input id="configSetMultiImage5" type="file" style="display:none"/>
            </div>
            <div class="mdui-col-xs-4">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="document.getElementById('configSetMultiImage6').click();">上传图片 6
                </button>
                <input id="configSetMultiImage6" type="file" style="display:none"/>
            </div>
            <div class="mdui-col-xs-4">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="document.getElementById('configSetMultiImage7').click();">上传图片 7
                </button>
                <input id="configSetMultiImage7" type="file" style="display:none"/>
            </div>
            <div class="mdui-col-xs-4">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="document.getElementById('configSetMultiImage8').click();">上传图片 8
                </button>
                <input id="configSetMultiImage8" type="file" style="display:none"/>
            </div>
            <div class="mdui-col-xs-4">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="document.getElementById('configSetMultiImage9').click();">上传图片 9
                </button>
                <input id="configSetMultiImage9" type="file" style="display:none"/>
            </div>
            <div class="mdui-col-xs-12">
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        onclick="clearMultiImage();">清空所有图片
                </button>
            </div>
        </div>
    </div>

    <div class="mdui-textfield">
        <label class="mdui-textfield-label">定位</label>
        <input id="configLocation" class="mdui-textfield-input" type="text" value=""/>
    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">转发出处</label>
        <input id="configApp" class="mdui-textfield-input" type="text" value=""/>
        <div class="mdui-textfield-helper">设置为“视频号 · ○○○”时将以链接的浅蓝色显示</div>
    </div>
    <div class="mdui-row">
        <div class="mdui-textfield mdui-col-xs-6">
            <label class="mdui-textfield-label">发表日期</label>
            <input id="configPostDate" class="mdui-textfield-input" type="date"/>
        </div>
        <div class="mdui-textfield mdui-col-xs-3">
            <label class="mdui-textfield-label">发表时间</label>
            <input id="configPostTimeHour" class="mdui-textfield-input" type="number" min="0" max="23"/>
        </div>
        <div class="mdui-textfield mdui-col-xs-3">
            <label class="mdui-textfield-label">&nbsp;</label>
            <input id="configPostTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59"/>
        </div>
        <div class="mdui-textfield mdui-col-xs-6">
            <label class="mdui-textfield-label">截图日期</label>
            <input id="configScreenshotDate" class="mdui-textfield-input" type="date"/>
        </div>
        <div class="mdui-textfield mdui-col-xs-3">
            <label class="mdui-textfield-label">截图时间</label>
            <input id="configScreenshotTimeHour" class="mdui-textfield-input" type="number" min="0" max="23"/>
        </div>
        <div class="mdui-textfield mdui-col-xs-3">
            <label class="mdui-textfield-label">&nbsp;</label>
            <input id="configScreenshotTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59"/>
        </div>
        <div class="mdui-textfield mdui-col-xs-4 mdui-col-sm-6">
            <label class="mdui-textfield-label">点赞数</label>
            <input id="configLike" class="mdui-textfield-input" type="number" min="0"/>
        </div>
        <div class="mdui-col-xs-4 mdui-col-sm-3">
            <div class="mdui-textfield">
                <label class="mdui-textfield-label">图片长度</label>
                <input id="configHeight" class="mdui-textfield-input" type="number" value="1920" min="1920"/>
            </div>
        </div>
        <div class="mdui-col-xs-4 mdui-col-sm-3">
            <div class="mdui-textfield">
                <label class="mdui-textfield-label">&nbsp;</label>
                <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                        mdui-tooltip="{content:'图片宽度默认为 1080 像素，长度根据设备长宽比确定计算，可能和实际存在偏差'}"
                        onclick="document.getElementById('configHeight').value = Math.round(document.body.clientHeight / document.body.clientWidth * 1080);">
                    自动设定
                </button>
            </div>
        </div>
    </div>

    <div class="mdui-textfield">
        <label class="mdui-textfield-label">评论区</label>
    </div>
    <div class="mdui-row">
        <div class="mdui-col-xs-12">
            <label class="mdui-checkbox">
                <input id="configShowComment" type="checkbox" name="configShowComment"
                       onclick="document.getElementById('configCommentPreview').classList[this.checked ? 'remove' : 'add']('mdui-hidden');"/>
                <i class="mdui-checkbox-icon"></i>
                显示评论区
            </label>
        </div>
        <div id="configCommentPreview" class="mdui-col-xs-12 mdui-hidden">
            <div class="mdui-table-fluid mdui-m-y-2">
                <table class="mdui-table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>用户名</th>
                        <th>评论内容</th>
                        <th>时间</th>
                    </tr>
                    </thead>
                    <tbody id="configCommentList">
                    </tbody>
                </table>
            </div>
            <div class="mdui-row">
                <div class="mdui-col-xs-6">
                    <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                            mdui-dialog="{target:'#addComment'}"
                            onclick="document.getElementById('configCommentName').value = randomName(); document.getElementById('configCommentAvatar').value = null;">
                        添加评论
                    </button>
                </div>
                <div class="mdui-col-xs-6">
                    <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                            onclick="removeComment()">删除评论
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="mdui-textfield">
        <label class="mdui-textfield-label">通知栏</label>
    </div>
    <div class="mdui-row">
        <div class="mdui-col-xs-6">
            <label class="mdui-checkbox">
                <input id="configTopBarAppIcons" type="checkbox" name="configTopBarAppIcons"/>
                <i class="mdui-checkbox-icon"></i>
                显示 APP 图标
            </label>
        </div>
        <div class="mdui-col-xs-6">
            <label class="mdui-checkbox">
                <input id="configTopBarStatusIcons" type="checkbox" name="configTopBarStatusIcons"/>
                <i class="mdui-checkbox-icon"></i>
                随机信号和电量
            </label>
        </div>
    </div>

    <div class="mdui-textfield">
        <label class="mdui-textfield-label">其他</label>
    </div>
    <div class="mdui-row">
        <div class="mdui-col-xs-6">
            <label class="mdui-checkbox">
                <input id="configUIWhite" type="checkbox" name="configUIWhite"/>
                <i class="mdui-checkbox-icon"></i>使用 7.0 以上版本白色界面
            </label>
        </div>
        <div class="mdui-col-xs-6">
            <label class="mdui-checkbox">
                <input id="configFirstAvatar" type="checkbox" name="configFirstAvatar"/>
                <i class="mdui-checkbox-icon"></i>第一个头像固定为自己
            </label>
        </div>
    </div>

    <button id="generate" class="mdui-btn mdui-ripple mdui-color-theme-accent mdui-btn-block mdui-m-t-2">生成</button>

    <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1"
            onclick="localStorage.removeItem('config');localStorage.removeItem('avatar');mdui.snackbar({message:'已清除～刷新后将使用默认设置'})">
        清除保存的设置信息
    </button>

    <div id="fakeWechatMoment">
        <div id="topBar" class="topBar">
            <div id="topBarAppIcons"></div>
            <div style="flex-grow:1"></div>
            <img id="topBarIconWifi" class="topBarIcon"/>
            <img id="topBarIconSignal" class="topBarIcon"/>
            <img id="topBarIconBattery" class="topBarIcon"/>
            <span id="topBarTime"></span>
        </div>
        <div id="header" class="header">
            <div style="width:40px"></div>
            <img style="width:auto;height:48px"/>
            <div style="flex: 1;text-align: center;font-size: 42px;font-weight: 550">详情</div>
            <div style="font-weight: bold">···</div>
            <div style="width:40px;"></div>
        </div>
        <div id="main" class="main">
            <div style="height:30px"></div>
            <div class="avatarOut">
                <div id="avatar" class="avatarIn squareImage"></div>
            </div>
            <div class="content">
                <div id="name" class="name"></div>
                <div style="height:11px"></div>
                <div id="text" class="text"></div>

                <div id="article" class="article" style="display:none">
                    <div id="articleIcon" class="articleIcon squareImage"
                         style="background-image:url(image/common/HTB1ci0Da5zxK1RjSspjq6AS.pXaD.jpg)"></div>
                    <div id="articleTitle" class="articleTitle"></div>
                </div>

                <div id="singleImage" class="singleImage" style="display:none">
                    <img id="image" class="image" src="image/common/分享单张图片.jpg"/>
                </div>

                <div id="multiImage" class="multiImage" style="display:none">
                    <div id="image1" class="multiImageBox squareImage"></div>
                    <div id="image2" class="multiImageBox squareImage"></div>
                    <div id="image3" class="multiImageBox squareImage"></div>
                    <div id="image4" class="multiImageBox squareImage"></div>
                    <div id="image5" class="multiImageBox squareImage"></div>
                    <div id="image6" class="multiImageBox squareImage"></div>
                    <div id="image7" class="multiImageBox squareImage"></div>
                    <div id="image8" class="multiImageBox squareImage"></div>
                    <div id="image9" class="multiImageBox squareImage"></div>
                </div>

                <div style="height:20px"></div>
                <div class="info">
                    <span id="location" style="color:#576b95"></span>
                    <div style="height:20px"></div>
                    <span id="time"></span>&nbsp;<span style="color:#576b95">删除</span>
                </div>
                <img style="position:relative;display:inline-block;width:auto;height:42px;top:9px"/>
            </div>
            <div style="height:50px"></div>
            <img id="triangle" src="triangle.svg" width="40" height="16"
                 style="position: relative; left: 25px; top: 5px;"/>
            <div id="like" class="like">
                <img src="like.svg" width="32" height="32"
                     style="position: relative; left: 30px; top: 43px; display: inline-block; vertical-align: top;"/>
                <div id="likeAvatarList" class="likeAvatarList"></div>
                <div style="height:17px"></div>
            </div>
            <div id="comment" class="like" style="margin-top:1px">
                <img src="commentlist.svg" width="32" height="32"
                     style="position: relative; left: 30px; top: 45px; display: inline-block; vertical-align: top;"/>
                <div id="commentList" class="likeAvatarList"></div>
            </div>
        </div>
        <div id="footer" class="footer">
            <div class="commentInput">评论</div>
            <div style="width:22px;display:inline-block"></div>
            <img style="width:88px!important;height:88px!important"/>
            <div style="width:40px;display:inline-block"></div>
            <div class="commentSend">发送</div>
        </div>
    </div>

    <div class="mdui-m-y-2" style="text-align:center;line-height:1.5em">
        <a href="https://github.com/luler/WechatMomentScreenshot.git" target="_blank"
           style="text-decoration:none">
            <img src="https://img.shields.io/github/stars/luler/WechatMomentScreenshot.svg?style=social"/>
        </a>
        <br>
        <span class="mdui-typo-caption-opacity">© 2022 我只想看看蓝天</span>
    </div>

    <div id="addComment" class="mdui-dialog">
        <div class="mdui-dialog-title">添加评论</div>
        <div class="mdui-dialog-content mdui-typo">
            <div class="mdui-row">
                <div class="mdui-col-xs-8 mdui-col-sm-10">
                    <div class="mdui-textfield">
                        <label class="mdui-textfield-label">用户名</label>
                        <input id="configCommentName" class="mdui-textfield-input" type="text" value=""/>
                        <div class="mdui-textfield-helper">默认的名字是随机生成的，未选择头像则会随机抽取一个头像。</div>
                    </div>
                </div>
                <div class="mdui-col-xs-4 mdui-col-sm-2">
                    <div class="mdui-textfield">
                        <label class="mdui-textfield-label">&nbsp;</label>
                        <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent"
                                onclick="document.getElementById('configCommentAvatar').click();">上传头像
                        </button>
                        <input id="configCommentAvatar" type="file" style="display: none;"/>
                    </div>
                </div>
                <div class="mdui-col-xs-12">
                    <div class="mdui-textfield">
                        <label class="mdui-textfield-label">评论内容</label>
                        <textarea id="configCommentText" class="mdui-textfield-input"></textarea>
                    </div>
                </div>
                <div class="mdui-textfield mdui-col-xs-6">
                    <label class="mdui-textfield-label">评论日期</label>
                    <input id="configCommentDate" class="mdui-textfield-input" type="date"/>
                </div>
                <div class="mdui-textfield mdui-col-xs-3">
                    <label class="mdui-textfield-label">评论时间</label>
                    <input id="configCommentTimeHour" class="mdui-textfield-input" type="number" min="0" max="23"/>
                </div>
                <div class="mdui-textfield mdui-col-xs-3">
                    <label class="mdui-textfield-label">&nbsp;</label>
                    <input id="configCommentTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59"/>
                </div>
                <div class="mdui-col-xs-12">
                    <div class="mdui-textfield">
                        <label class="mdui-textfield-label">回复给……（可选）</label>
                        <textarea id="configCommentReply" class="mdui-textfield-input"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="mdui-dialog-actions">
            <button class="mdui-btn mdui-ripple" mdui-dialog-close>CANCEL</button>
            <button class="mdui-btn mdui-ripple" mdui-dialog-close
                    onclick="var avatarSrc = document.getElementById('configCommentAvatar').files[0] ? window.URL.createObjectURL(document.getElementById('configCommentAvatar').files[0]) : avatarURL[Math.floor(Math.random() * avatarURL.length)]; var configCommentDate = document.getElementById('configCommentDate').valueAsDate; configCommentDate.setHours(document.getElementById('configCommentTimeHour').value); configCommentDate.setMinutes(document.getElementById('configCommentTimeMinute').value); addComment(avatarSrc, document.getElementById('configCommentName').value, document.getElementById('configCommentText').value, configCommentDate, document.getElementById('configCommentReply').value);">
                OK
            </button>
        </div>
    </div>

    <div id="generatedPopup" class="mdui-dialog">
        <div class="mdui-dialog-title">生成完毕</div>
        <img id="generated"/>

        <div class="mdui-typo-caption-opacity mdui-m-y-2">
            <p>如果点击“保存”没有反应<br>请尝试长按/右键图片进行另存为操作</p>
            <p>当前使用的头像与设置已保存到本地<br>下次打开本工具将自动读取～</p>
        </div>
        <div class="mdui-dialog-actions">
            <a id="save" class="mdui-btn mdui-ripple">保存</a>
            <button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button>
        </div>
    </div>

    <div id="request" class="mdui-dialog">
        <div id="requestResult" class="mdui-dialog-title"></div>
        <div id="requestResultContent" class="mdui-dialog-content mdui-typo"></div>
        <div class="mdui-dialog-actions">
            <button id="requestAction" class="mdui-btn mdui-ripple" mdui-dialog-close>OK</button>
        </div>
    </div>
</div>

<script src="js/mdui.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>